<template>
  <div style="width: 100%">
    <div style="float: left">
      <el-form
        ref="filtersForm"
        :inline="true"
        :model="object"
        class="demo-form-inline"
        @submit.native.prevent
      >
        <template v-for="(item, index) in columns">
          <el-form-item
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :label-width="item.labelWidth"
            :required="item.required"
            :error="item.error"
            :show-message="item.showMessage"
            :inline-message="item.inlineMessage"
            :size="item.size"
          >
            <template
              v-if="
                ['text', 'textarea', 'password', 'url', 'hidden'].indexOf(
                  item.type
                ) != -1
              "
            >
              <el-input
                v-model="object[item.prop]"
                :type="item.type"
                :placeholder="item.placeholder"
                :maxlength="item.maxlength"
                :minlength="item.minlength"
                show-word-limit
                clearable
                :disabled="item.disabled"
                :size="item.size"
                :prefix-icon="item.prefixIcon"
                :suffix-icon="item.suffixIcon"
                :rows="item.rows"
                :autosize="true"
                :name="item.prop"
                :readonly="item.readonly"
                :max="item.max"
                :min="item.min"
                :step="item.step"
                :resize="item.resize"
                autofocus
                :label="item.label"
              />
            </template>
            <template v-if="item.type == 'number'">
              <template v-if="item.operator == 'between'">
                <el-row>
                  <el-col :span="11">
                    <el-input-number
                      v-model="object[item.prop + '-start']"
                      style="width: 100%"
                      :min="item.min"
                      :max="item.max"
                      :step="item.step"
                      :precision="item.precision"
                      :label="item.lable"
                      :placeholder="
                        '最小' + (item.placeholder ? item.placeholder : '')
                      "
                      :disabled="item.disabled"
                      :controls="false"
                    />
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-input-number
                      v-model="object[item.prop + '-end']"
                      style="width: 100%"
                      :min="item.min"
                      :max="item.max"
                      :step="item.step"
                      :precision="item.precision"
                      :label="item.lable"
                      :placeholder="
                        '最大' + (item.placeholder ? item.placeholder : '')
                      "
                      :disabled="item.disabled"
                      :controls="false"
                    />
                  </el-col>
                </el-row>
              </template>
              <template v-else>
                <el-input-number
                  v-model="object[item.prop]"
                  :min="item.min"
                  :max="item.max"
                  :step="item.step"
                  :precision="item.precision"
                  :label="item.lable"
                  :placeholder="item.placeholder"
                  :disabled="item.disabled"
                  :controls="false"
                />
              </template>
            </template>
            <template v-if="item.type == 'radio'">
              <wise-radio
                v-model="object[item.prop]"
                :data-dic="item.dataDic"
              />
            </template>
            <template v-if="item.type == 'select'">
              <wise-select
                v-model="object[item.prop]"
                :url="item.url"
                :placeholder="item.placeholder"
                :filterable="item.filterable"
                :label-key="item.labelKey"
                :data-dic="item.dataDic"
                :value-key="item.valueKey"
                :filters="item.filters"
                :filters-obj="item.filtersObj"
                :obj-keys="item.objKeys"
                :disabled="item.disabled"
                :object="object"
                @on-value="setValue"
              />
            </template>
            <template v-if="item.type == 'select-multiple'">
              <wise-select-multiple
                v-model="object[item.prop]"
                :url="item.url"
                :label-key="item.labelKey"
                :data-dic="item.dataDic"
                :value-key="item.valueKey"
                :filters="item.filters"
                :filters-obj="item.filtersObj"
                :obj-keys="item.objKeys"
                :disabled="item.disabled"
                :object="object"
                :placeholder="item.placeholder"
              />
            </template>
            <template v-if="item.type == 'area'">
              <wise-region
                v-model="object[item.prop]"
                :show-type="item.showType"
                :obj-keys="item.objKeys"
                @on-value="setValue"
              />
            </template>
            <template
              v-if="
                ['year', 'month', 'date', 'week', 'datetime'].indexOf(
                  item.type
                ) != -1
              "
            >
              <template v-if="item.operator == 'between'">
                <el-row>
                  <el-col :span="11">
                    <wise-date
                      v-model="object[item.prop + '-start']"
                      :type="item.type"
                      :placeholder="
                        '选择' +
                        (item.placeholder ? item.placeholder : '') +
                        '开始日期'
                      "
                    />
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <wise-date
                      v-model="object[item.prop + '-end']"
                      :type="item.type"
                      :placeholder="
                        '选择' +
                        (item.placeholder ? item.placeholder : '') +
                        '结束日期'
                      "
                    />
                  </el-col>
                </el-row>
              </template>
              <template v-else>
                <wise-date
                  v-model="object[item.prop]"
                  :type="item.type"
                  :format="item.format"
                  :value-format="item.valueFormat"
                  :placeholder="item.placeholder"
                />
              </template>
            </template>
            <template v-if="item.type == 'render'">
              <form-render
                :item="item"
                :object="object"
                :render="item.render"
              />
            </template>
          </el-form-item>
        </template>
        <!--          <el-form-item>-->
        <!--            <el-button type="primary" @click="submitForm">查询</el-button>-->
        <!--            <el-button @click="resetForm('filtersForm')">重置</el-button>-->
        <!--          </el-form-item>-->
      </el-form>
    </div>
    <div style="float: right; position: absolute; right: 10px; bottom: 20px">
      <el-button type="primary" @click="submitForm">过滤</el-button>
    </div>
  </div>
</template>

<script>
import FormRender from "./formRender";
import WiseRadio from "../components/wiseRadio";
import WiseSelect from "../components/wiseSelect";
import WiseDate from "../components/wiseDate";
import WiseRegion from "../components/wiseRegion";
import WiseSelectMultiple from "../components/wiseSelectMultiple";
export default {
  name: "WiseFiltersForm",
  components: {
    WiseSelectMultiple,
    WiseRegion,
    WiseDate,
    WiseSelect,
    WiseRadio,
    FormRender,
  },
  props: {
    columns: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      object: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit("on-filters", []);
    },
    init() {
      this.columns.forEach((item) => {
        if (item.defaultValue) {
          this.$set(this.object, item.prop, item.defaultValue);
          if (item.type === "select") {
            let arry = [];
            item.objKeys.forEach((o) => {
              arry.push({
                field: o.field,
                value: item.defaultValue[o.key],
              });
            });
            this.setValue(arry);
          }
        }
      });
    },
    setValue(objVal) {
      if (objVal && objVal.length > 0) {
        objVal.forEach((item) => {
          if (item.field.indexOf(".") !== -1) {
            let fields = item.field.split(".");
            this.$set(this.object[fields[0]], fields[1], item.value);
          } else {
            this.$set(this.object, item.field, item.value);
          }
        });
      }
    },
    // setValue(objVal) {
    //   if (objVal && objVal.length > 0) {
    //     objVal.forEach(item => {
    //       this.$set(this.object, item.field, item.value)
    //     })
    //   }
    // },
    submitForm() {
      let filters = [];
      this.columns.forEach((column) => {
        if (column) {
          if (
            column.operator === "between" &&
            this.object[column.prop + "-start"] &&
            this.object[column.prop + "-end"]
          ) {
            filters.push({
              field: column.prop,
              operator: "BETWEEN",
              value: this.object[column.prop + "-start"],
              value_to: this.object[column.prop + "-end"],
            });
          } else if (column.operator === "IN") {
            if (
              this.object[column.prop] &&
              this.object[column.prop].length > 0 &&
              this.object[column.prop][0]
            ) {
              column.objKeys.forEach((item) => {
                filters.push({
                  field: item.field,
                  operator: column.operator ? column.operator : "EQUALS",
                  values: this.object[column.prop].map((o) => {
                    return o ? o[item.key] : "";
                  }),
                });
              });
            }
          } else {
            if (column.type === "select") {
              column.objKeys.forEach((item) => {
                if (this.object[item.field]) {
                  filters.push({
                    field: item.field,
                    operator: column.operator ? column.operator : "EQUALS",
                    value: this.object[item.field],
                  });
                }
              });
            } else {
              if (this.object[column.prop]) {
                filters.push({
                  field: column.prop,
                  operator: column.operator ? column.operator : "EQUALS",
                  value: this.object[column.prop],
                });
              }
            }
          }
          // if (this.object[column.prop]) {
          //   if (column.type === 'select') {
          //     column.objKeys.forEach(item => {
          //       filters.push({ field: item.field, operator: column.operator ? column.operator : 'EQUALS', value: this.object[item.field] })
          //     })
          //   } else {
          //     if (column.operator === 'between') {
          //       filters.push({
          //         field: column.prop,
          //         operator: 'BETWEEN',
          //         value: this.object[column.prop + '-start'],
          //         value_to: this.object[column.prop + '-end']
          //       })
          //     } else {
          //       if (column.operator === 'IN') {
          //         filters.push({ field: column.prop, operator: 'IN', values: this.object[column.prop] })
          //       } else {
          //         filters.push({ field: column.prop, operator: column.operator ? column.operator : 'EQUALS', value: this.object[column.prop] })
          //       }
          //     }
          //   }
          // }
        }
      });
      this.$emit("on-filters", filters);
    },
  },
};
</script>

<style scoped>
</style>